<template>

<div>
  <div>
      <el-row :gutter="20">
        <el-col :span="4" :offset="2"><div style="padding:10px 5px 0 5px; "  class="grid-content my-row-bg my-text">基础信息</div></el-col>
       
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5" :offset="2" ><div  style="padding:10px 0 0 5px" class="grid-content my-row-bg">
           订单编号：{{order.orderNumber}}
          </div>
          </el-col>
        <el-col :span="5" ><div class="grid-content my-row-bg" style="padding:10px 0 0 5px">
            订单状态：{{order.orderState}}
        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5" :offset="2" ><div  style="padding:10px 0 0 5px" class="grid-content my-row-bg">
           下单时间：{{order.createdDate}}
          </div>
          </el-col>
        <el-col :span="5" ><div class="grid-content my-row-bg" style="padding:10px 0 0 5px">
            付款时间：{{order.payTime}}
        </div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5" :offset="2" ><div  style="padding:10px 0 0 5px" class="grid-content my-row-bg">
           支付方式：{{order.payType}}
          </div>
          </el-col>
        <el-col :span="5" ><div class="grid-content my-row-bg" style="padding:10px 0 0 5px">
            赠送积分：{{order.point}}
        </div></el-col>
      </el-row>
     
</div >

  <div style="margin-top:50px;">
     <el-row :gutter="20">
        <el-col :span="4" :offset="2"><div style="padding:10px 5px 0 5px; "  class="grid-content my-row-bg my-text">用户信息</div></el-col>
       
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5" :offset="2" ><div  style="padding:10px 0 0 5px" class="grid-content my-row-bg">
           用户微信：{{user.vxName}}
          </div>
          </el-col>
        <el-col :span="5" ><div class="grid-content my-row-bg" style="padding:10px 0 0 5px">
            用户手机：{{user.telphone}}
        </div></el-col>
        <el-col :span="5" ><div class="grid-content my-row-bg" style="padding:10px 0 0 5px">
            用户昵称：{{user.username}}
        </div></el-col>
      </el-row>
      
  </div>

 
  
  <div id="contentTwo" style="margin-top:50px;">
     <el-row :gutter="20">
        <el-col :span="4" ><div style="padding:10px 5px 0 5px; "  class="grid-content my-row-bg my-text">活动信息</div></el-col>
       
      </el-row>
       <el-table
        v-loading="listLoading"
        :data="course"
        @selection-change="handleSelectionChange"
        element-loading-text="数据加载中"
        border
        fit
        stripe
        highlight-current-row
        style="width: 100%">

        
        <el-table-column prop="id" label="活动ID"  />
        <el-table-column prop="name" label="活动名称" />
     
    
         <el-table-column label="列表图">
            <template slot-scope="scope">
              　　　　<img :src="scope.row.pic" width="40" height="40" />
            </template>
         </el-table-column>
        
        

       
        <el-table-column prop="entryFee" label="报名费"  />

      </el-table>
      
  </div>

  <div id="contentTwo" style="margin-top:50px;">
     <el-row :gutter="20">
        <el-col :span="4" ><div style="padding:10px 5px 0 5px; "  class="grid-content my-row-bg my-text">订单信息</div></el-col>
     </el-row>
      <el-table
        v-loading="listLoading"
        :data="orderList"
        @selection-change="handleSelectionChange"
        element-loading-text="数据加载中"
        border
        fit
        stripe
        highlight-current-row
        style="width: 100%">

        <el-table-column prop="money" label="订单金额" />
        <el-table-column prop="coupon" label="优惠卷" />
        <el-table-column prop="fonta" label="积分优惠" />
        <el-table-column prop="payMoney" label="实际付款金额" />
        
      </el-table>
      
  </div>

  <div id="contentThree" style="margin-top:50px;">
     <el-row :gutter="20">
        <el-col :span="4" ><div style="padding:10px 5px 0 5px; "  class="grid-content my-row-bg my-text">订单操作记录</div></el-col>
       
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="operation"
        @selection-change="handleSelectionChange"
        element-loading-text="数据加载中"
        border
        fit
        stripe
        highlight-current-row
        style="width: 100%">

        <!--数据展示-->
       
       <el-table-column prop="name" label="操作人"  />
       <el-table-column prop="createDate" label="操作时间" />
       <el-table-column prop="remark" label="备注" />
      </el-table>
      
  </div>

  


</div>
  


</template>
<script>
//引入调用headlineShow.js文件
import activityOrder from "@/api/activityOrder";

export default {
  
  
  data() {
    //定义变量和初始值
    return {

      course: [{
        id:"",
        name:"",
        pic:"",
        entryFee:""
      }],
      orderList: [{
        money:"",
        coupon:"",
        fonta:"",
        payMoney:""
      }],
      operation: [{
        name:"",
        createDate:"",
        remark:""
      }],
      listLoading: true, // 是否显示loading信息
      list: null, //查询之后接口返回集合
      page: 0, //当前页
      limit: 5, //每页记录数
      total: 0, //总记录数
      headlineShowQuery: {
        stateOfCourse:"",
        name: "",
        startTime: "",
        endTime: "",
      }, //条件封装对象
      order:{
        orderNumber:"1",
        payTime:"",
        createdDate:"",
        telphone:"",
        orderState:"",
        payType:"",
        point:""
      },
      user:{
        vxName:"",
        telNumber:"",
        username:""
      }
      ,
   
      id:''
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    //调用
   this.init();
  },
  mounted() {
    this.listLoading = false;
  },
  methods: {
    //创建具体的方法，调用headlineShow.js定义的方法
    //获取轮播图列表的方法,默认是第一页
    getLine(page = 1) {
      this.page = page;
      activityOrder
        .selectAll(this.page,this.limit,this.headlineShowQuery)
        .then((response) => {
          //请求成功
          //response接口返回的数据  
          
          this.list = response.object.list;
          this.total = response.object.total;
        }); 
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      //获取所有选中项的gh(工号)属性的值
      this.ids = selection.map((item) => item.id);
      
    },
    resetData() {
      //清空的方法
      //表单输入项数据清空
      this.headlineShowQuery = {};
      //查询所有讲师数据
      this.getLine();
      this.$message({
        type: "success",
        message: "清空成功!",
      });
    },
    //删除头条的方法
    removeDataById(id) {
      console.log(id)
      this.ids = id
      this.$confirm(
        "此操作将会删除数据,您仍然可通过回收站找回 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          //点击确定，执行then方法
          //调用删除的方法
          headlineShow.deleteOne(this.ids).then((response) => {
            //删除成功
            //提示信息
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //回到列表页面
            this.getLine();
          });
        })
        .catch((e) => {
          this.$message({
            type: "info",
            message: "已取消删除!",
          });
        }); //点击取消，执行catch方法
    },
    init() {
      //判断路径有id值,做修改
      console.log(this.$route.params.id)
      if (this.$route.params && this.$route.params.id) {
        //从路径获取id值
        const id = this.$route.params.id;
        //调用根据id查询的方法
        // this.getInfo(id);
        
         activityOrder.selectOrder(id).then((response) => {
             this.order.orderNumber = response.object.order.orderNumber;
             this.order.payTime=response.object.order.payTime;
             this.order.createdDate=response.object.order.createdDate;
             this.order.telphone=response.object.order.telphone;
             this.order.orderState=response.object.order.orderState;
             this.order.payType=response.object.order.payType;
             this.order.point=response.object.order.point;

            this.user.vxName=response.object.customer.vxName;
            this.user.telphone=response.object.customer.telNumber;
            this.user.username=response.object.customer.username;

    
            this.course[0].id=response.object.course.id;
            this.course[0].name=response.object.course.name;
            this.course[0].pic=response.object.course.pic;
            this.course[0].entryFee=response.object.course.activityMoney;

            this.orderList[0].money=response.object.orderList.money;
            this.orderList[0].coupon=response.object.orderList.coupon;
            this.orderList[0].fonta=response.object.orderList.fonta;
            this.orderList[0].payMoney=response.object.orderList.payMoney;


            this.operation[0].name=response.object.operation.name;
            this.operation[0].createDate=response.object.operation.createDate;
            this.operation[0].remark=response.object.operation.remark;
           
         });
        


      } else {
        //路径没有id值，做添加
        //清空表单
       
      }
    }
  },
};
</script>
<style>
  .el-row {
    margin-bottom: 5px
  }
  .el-row:last-child {
      margin-bottom: 0;
    }
  .el-col {
    border-radius: 4px;
  }
  /* .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  } */
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    
  }
  .my-row-bg {
    padding: 5px 0;
    
    background-color: #e4e6eb;
  }
  .my-text{
    font-weight: 800;
  }

  #content,#contentTwo,#contentThree {
  width: 82%;
  margin: 0 auto;
}
</style>
